<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../lib/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
    <script src="index.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.addEvent('domready', function () {
            var scroll = new Scroll($('scroll')).withAnimate('fadeSlide');
            $('next').addEvent('click',function(){
                scroll.nextPage();
            });
            $('pre').addEvent('click',function(){
                scroll.prePage();
            });
        });
    </script>
    <style>
        table {
            width: 500px;
            height: 500px;
        }
        table,tr,td {
            border: 1px solid #75ade7;
            border-collapse:collapse;
        }
        .scroll-content {
            position: relative;
            overflow: hidden;
        }
        .scroll-item {
            position: absolute;
            opacity: 0;
            left:0;
            right:0;
            visibility: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .show {
            visibility: visible;
            opacity: 1;
        }
        .visible {
            visibility: visible;
        }
        a.right {
            right: 0;
            top: 0;
        }
        .rightArrow {
            background: url('image/fleche2.png') no-repeat center right;
        }
        a.left {
            left: 0;
            top: 0;
        }
        .leftArrow {
            background: url('image/fleche1.png') no-repeat center left;
        }
        a.left,a.right{
            position: absolute;
            height: 99%;
            width: 25%;
            cursor: pointer;
            z-index: 10;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            -khtml-opacity: 0.6;
            opacity: 0.6;
        }
    </style>
</head>
<body>
<div id="scroll">
    <div>
        <table>
            <tr>
                <td>111111</td>
                <td>222223</td>
                <td>333333</td>
            </tr>
            <tr>
                <td>444444</td>
                <td>555555</td>
                <td>666666</td>
            </tr>
        </table>
    </div>
    <div>
        <table>
            <tr>
                <td>asdasd</td>
                <td>ffffff</td>
                <td>asdffdsa</td>
            </tr>
            <tr>
                <td>xzcvzz</td>
                <td>qweqer</td>
                <td>jkljkl</td>
            </tr>
        </table>
    </div>
    <div>
        <table>
            <tr>
                <td>tyutry</td>
                <td>vnvnvn</td>
                <td>,./.,/,./</td>
            </tr>
            <tr>
                <td>opopuoi</td>
                <td>dvdfg</td>
                <td>23425</td>
            </tr>
        </table>
    </div>
    <div>
        <table>
            <tr>
                <td>777777</td>
                <td>888888</td>
                <td>999999</td>
            </tr>
            <tr>
                <td>000000</td>
                <td>121212</td>
                <td>131313</td>
            </tr>
        </table>
    </div>
</div>
<button id="pre" name="pre" value="上一页">上一页</button>
<button id="next" name="next" value="下一页">下一页</button>
</body>
</html>